import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { Button, Animated,LayoutAnimation, Easing,BackHandler, ToastAndroid } from 'react-native';
import { R, sh, sw, Adp, Deviceinfo, ART } from '../../tools';
import { useNavigation,CommonActions } from '@react-navigation/native';
import { observer } from '../../data';
import { Icons, SvgIcon, Colors } from '../../res';
import { useApolloClient } from '../../network';
import Video from 'react-native-video';
import Swiper from 'react-native-swiper';
import FlipWords from '../../widgets/FlipWords';

const { Surface, Group, Path, Shape } = ART;


const TAG = "页面 :: home/HomePage :: \\ ";
/**
 *  数据中心
 */
import { DataCenter } from '../../data';

const paddingL = 11;

function Header(){

    return (
        <R.View style={{width: sw,height:'auto',paddingHorizontal:paddingL,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                <R.View style={{flexDirection:'row',justifyContent:'flex-start',alignItems:'center'}}>
                    <R.View style={{height:58,width:58,borderRadius:30,overflow:'hidden',marginEnd:10}}>
                        <R.Image source={require("../../res/imageAssets/avatar.png")} style={{height:58,width:58}}/>
                    </R.View>
                    <R.View style={{justifyContent:'space-between',alignItems:'flex-start'}}>
                        <R.Text style={{marginBottom:5,fontSize:16}}>Billie</R.Text>
                        <R.View style={{flexDirection:'row'}}>
                            <R.Image source={require("../../res/imageAssets/diamond.png")} style={{height:18,width:18,marginStart:-3}} resizeMode={"contain"}/>
                            <R.Text style={{fontSize:14,color:'#222'}}>121</R.Text>
                            <R.Image source={require("../../res/imageAssets/exp.png")} style={{height:20,width:20,marginStart:8}} resizeMode={"contain"}/>
                            <R.Text style={{fontSize:14,color:'#222'}}>620</R.Text>
                        </R.View>
                    </R.View>
                </R.View>
                <R.View style={{justifyContent:'center',alignItems:'center'}}>
                    <R.Image source={require("../../res/imageAssets/bandge.png")} style={{height:30,width:30,marginBottom:2}}/>
                    <R.Text style={{fontSize:12,color:'#333'}}>无畏勇士</R.Text>
                </R.View>
        </R.View>
    )
}

const HomePage = (props) => {
    const navigation = props.navigation;

    if(true) return <FlipWords/>

    return (
        <R.ScrollView>
            <R.View style={styles.body}>
            <Header/>
            <R.Text style={{fontSize:18,color:'#333',marginStart:paddingL,marginTop:22,alignSelf:'flex-start'}}>战斗推荐区</R.Text>
            <Swiper 
            containerStyle={{maxHeight:200,minHeight:200,paddingTop:10,marginTop:0,backgroundColor:'transparent',justifyContent:'center',alignItems:'center'}}
            >
                <R.View style={{height:180,width:sw*0.98,marginStart:0.01*sw,backgroundColor:'#00ff00',borderRadius:8,overflow:'hidden'}} />
                <R.View style={{height:180,width:sw*0.98,marginStart:0.01*sw,backgroundColor:'#0000ff',borderRadius:8,overflow:'hidden'}} />
            </Swiper>
            
            <R.View>
            <R.View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center',width:sw,paddingEnd:paddingL}}>
            <R.Text style={{fontSize:18,color:'#333',marginStart:paddingL,marginTop:22,marginBottom:10,alignSelf:'flex-start'}}>战斗热门区</R.Text>
            <R.Text style={{fontSize:15,color:'#333',marginStart:paddingL,marginTop:22,marginBottom:10,alignSelf:'flex-start'}}>选择分类</R.Text>
            </R.View>
            <R.View>
                {
                    [1,2,3].map((item) => {
                        return <R.View/>
                    })
                }
            </R.View>
            </R.View>
            <R.FlatList
            data={[1,2,3,4]}
            keyExtractor={(item,index) => index.toString()}
            contentContainerStyle={{width:sw}}
            numColumns={2}
            renderItem={({item,index}) => {
                // 0.97
                return (
                    <R.View style={{height:170,width:sw*0.485,marginStart:sw*0.01,marginTop:4,backgroundColor:'orange',borderRadius:5,overflow:'hidden'}}>
                        <R.View style={{width:'100%',height:115,backgroundColor:'red'}}/>
                        <R.Text style={{fontSize:13,color:'#222',paddingHorizontal:4.6}}>这是很长一段视频描述文字，或许有两行</R.Text>
                        <R.View>
                        <R.Text style={{fontSize:12,color:'#111',marginTop:3,fontWeight:'500',paddingStart:6}}>#动漫</R.Text>
                        </R.View>
                    </R.View>
                )
            }}
            />
            </R.View> 
        </R.ScrollView>
    )
};

export default observer(HomePage);

const styles = R.StyleSheet.create({
    body: {
        height: sh,
        width: sw,
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingTop:20,
        backgroundColor: Colors.white
    }
});